<template>
  <div class="title">实名实人认证</div>
  <img class="faceIcon" src="../../static/faceIcon.png" alt="" />
  <div class="agreeProtocol">
    <radio-group @change="checkEvent" style="transform: scale(0.7)">
      <radio value="true" color="#007aff" />
    </radio-group>
    <div class="agreeText">
      您知悉并同意应用提供者：调用相机、存储、麦克风权限，收集、使用您本人您的身份信息及人脸视频、图像，向合法数据持有者核实验证您的真实身份。我已认证阅读并同意
      <span style="color: #3277f2">《全部协议》</span>
    </div>
  </div>
  <div class="goValidate" @click="goValidate">快速验证</div>
</template>

<script setup>
import { ref, reactive } from "vue";
const isCheck = ref(false);
const checkEvent = (e) => {
  if (e.detail.value) {
    isCheck.value = true;
  }
};
const goValidate = () => {
  if (isCheck.value) {
    uni.navigateTo({ url: "../cardOcr/cardOcr" });
  }
};
</script>

<style scoped lang="scss">
.title {
  margin-top: 113rpx;
  height: 67rpx;
  line-height: 67rpx;
  font-size: 48rpx;
  text-align: center;
  color: rgba($color: #000000, $alpha: 0.85);
}
.faceIcon {
  margin: 159rpx 165rpx;
  margin-bottom: 90rpx;
  width: 420rpx;
  height: 420rpx;
}
.agreeProtocol {
  margin: 0 40rpx;
  display: flex;
  align-items: flex-start;
  .agreeText {
    font-size: 24rpx;
    line-height: 33rpx;
    color: rgba($color: #000000, $alpha: 0.45);
  }
}
.goValidate {
  width: 590rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  margin: 0 80rpx;
  margin-top: 317rpx;
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  background-color: #3277f2;
}
</style>
